<template>
  <div class="app-container">
    <el-form>
      <el-row style="padding-bottom: 10px">
        <el-col :span="12">
          <el-button type="primary" size="medium" @click="popNewUser">创建账号</el-button>
        </el-col>
        <el-col :span="12" style="text-align: right">
          <el-input
            v-model="query.username"
            placeholder="用户名"
            clearable
            style="width: 200px"
            maxlength="16"
          />
          <el-select v-model="query.role" filterable clearable placeholder="请选择角色">
            <el-option
              v-for="item in roleData"
              :key="item.itemId"
              :label="item.itemName"
              :value="item.itemId"
            />
          </el-select>
          <el-select v-model="query.status" filterable clearable placeholder="请选择状态">
            <el-option
              v-for="item in statusData"
              :key="item.itemId"
              :label="item.itemName"
              :value="item.itemId"
            />
          </el-select>
          <el-button type="primary" size="medium" @click="queryList">查询</el-button>
        </el-col>
      </el-row>
      <el-row>
        <el-table
          ref="userTable"
          :data="userData"
          stripe
          empty-text="暂无数据"
          style="width: 100%; height: 100%; max-height: 100%"
        >
          <el-table-column prop="username" label="用户名" />
          <el-table-column prop="roleDesc" label="角色" />
          <el-table-column prop="statusDesc" label="账号状态">
            <template slot-scope="scope">
              <span>{{ scope.row.statusDesc }}</span>
              <el-switch
                v-model="scope.row.status"
                active-color="#13ce66"
                inactive-color="#ff4949"
                @change="switchUser(scope.row)"
              />
            </template>
          </el-table-column>
          <el-table-column prop="createTime" label="创建日期" />
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button type="text" size="medium" @click="viewUser(scope.row.id)">查看</el-button>
              <el-button type="text" size="medium" @click="popEditUser(scope.row.id)">编辑</el-button>
              <el-button type="text" size="medium" @click="deleteUser(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-row>
    </el-form>
    <el-dialog :title="userDialogTitle" :visible.sync="userDialogVisible" width="500px">
      <el-form>
        <el-form-item label="用户名" label-width="100px">
          <el-input
            v-model="userInfo.username"
            placeholder="请输入用户名"
            clearable
            style="width: 300px"
            maxlength="16"
          />
        </el-form-item>
        <el-form-item label="角色" label-width="100px">
          <el-select
            v-model="userInfo.role"
            style="width: 300px"
            filterable
            clearable
            placeholder="请选择角色"
          >
            <el-option
              v-for="item in roleData"
              :key="item.itemId"
              :label="item.itemName"
              :value="item.itemId"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="拥有项目" label-width="100px">
          <el-select
            v-model="userInfo.projectIds"
            style="width: 300px"
            filterable
            clearable
            multiple
            placeholder="请选择项目"
          >
            <el-option
              v-for="item in projectData"
              :key="item.itemId"
              :label="item.itemName"
              :value="item.itemId"
            />
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="userDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveUser">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog :title="userViewDialogTitle" :visible.sync="userViewDialogVisible" width="500px">
      <el-form>
        <el-form-item label="用户名" label-width="100px">
          <el-input
            v-model="userViewInfo.username"
            placeholder="请输入用户名"
            clearable
            :disabled="true"
            style="width: 300px"
            maxlength="16"
          />
        </el-form-item>
        <el-form-item label="密码" label-width="100px">
          <span style="width: 220px; display: inline-block">{{ userViewInfo.initPwd }}</span>
          <span style="float: right; margin-right: 58px;">
            <el-button
              v-if="userViewInfo.initPwd !== '******'"
              type="text"
              size="medium"
              @click="copyPwd"
            >复制</el-button>
            <el-button type="text" size="medium" @click="resetPwd">重置</el-button>
          </span>
        </el-form-item>
        <el-form-item label="角色" label-width="100px">
          <el-select
            v-model="userViewInfo.role"
            style="width: 300px"
            filterable
            clearable
            :disabled="userViewReadonly"
            placeholder="请选择角色"
          >
            <el-option
              v-for="item in roleData"
              :key="item.itemId"
              :label="item.itemName"
              :value="item.itemId"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="拥有项目" label-width="100px">
          <el-select
            v-model="userViewInfo.projectIds"
            style="width: 300px"
            filterable
            clearable
            multiple
            :disabled="userViewReadonly"
            placeholder="请选择项目"
          >
            <el-option
              v-for="item in projectData"
              :key="item.itemId"
              :label="item.itemName"
              :value="item.itemId"
            />
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="userViewDialogVisible = false">取 消</el-button>
        <el-button type="primary" :style="userViewReadonly?'':'display: none'" @click="editMode">编 辑</el-button>
        <el-button type="primary" :style="userViewReadonly?'display: none':''" @click="editUser">保 存</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { requestCommonApi } from '@/api/common/common'
import { requestUserApi } from '@/api/user/userList'

export default {
  data() {
    return {
      query: {},
      roleData: [{
        itemName: '管理员',
        itemId: 1
      }, {
        itemName: '测试人员',
        itemId: 2
      }],
      statusData: [{
        itemName: '待激活',
        itemId: 0
      }, {
        itemName: '启用',
        itemId: 1
      }, {
        itemName: '禁用',
        itemId: 2
      }],
      projectData: [],
      userData: [],
      userDialogTitle: '',
      userDialogVisible: false,
      userInfo: {
        username: null,
        role: null,
        projectIds: []
      },
      userViewReadonly: true,
      userViewInfo: {},
      userViewDialogTitle: '',
      userViewDialogVisible: false
    }
  },
  created() {
    this.fetchData({})
    requestCommonApi('projectDropDownList', {}).then(response => {
      response.data.dataList.forEach(item => {
        this.projectData.push({
          itemId: item.itemId,
          itemCode: item.itemCode,
          itemName: item.itemName
        })
      })
    })
  },
  methods: {
    fetchData(param) {
      requestUserApi('list', param).then(response => {
        response.data.dataList.forEach(item => {
          this.userData.push({
            id: item.id,
            username: item.username,
            roleDesc: item.roleDesc,
            status: item.status !== 2,
            statusDesc: item.statusDesc,
            createTime: item.createTime
          })
        })
      })
    },
    queryList() {
      this.userData = []
      const param = {
        username: this.query.username,
        role: this.query.role,
        status: this.query.status
      }
      this.fetchData(param)
    },
    popNewUser() {
      this.userInfo = {
        username: null,
        role: null,
        projectIds: []
      }
      this.userDialogTitle = '创建账号'
      this.userDialogVisible = true
    },
    popEditUser(id) {
      this.userViewDialogTitle = '编辑账号'
      this.userViewReadonly = false
      this.queryUserInfo(id)
    },
    editMode() {
      this.userViewDialogTitle = '编辑账号'
      this.userViewReadonly = false
    },
    saveUser() {
      requestUserApi('save', this.userInfo).then(response => {
        if (response.code === '200') {
          this.queryList()
          this.userDialogVisible = false
        } else {
          this.$message.error(response.message)
        }
      })
    },
    editUser() {
      requestUserApi('save', this.userViewInfo).then(response => {
        if (response.code === '200') {
          this.queryList()
          this.userViewDialogVisible = false
        } else {
          this.$message.error(response.message)
        }
      })
    },
    viewUser(id) {
      this.userViewDialogTitle = '查看账号'
      this.userViewReadonly = true
      this.queryUserInfo(id)
    },
    queryUserInfo(id) {
      requestUserApi('detail', { id: id }).then(response => {
        if (response.code === '200') {
          this.userViewInfo = response.data
          this.userViewDialogVisible = true
        } else {
          this.$message.error(response.message)
        }
      })
    },
    resetPwd() {
      this.$confirm('确定重置"' + this.userViewInfo.username + '"的密码吗？', '重置密码确认', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        requestUserApi('resetPwd', { id: this.userViewInfo.id }).then(response => {
          if (response.code === '200') {
            this.userViewInfo.initPwd = response.data.newPassword
          } else {
            this.$message.error(response.message)
          }
        })
      }).catch(() => {
      })
    },
    copyPwd() {
      const copyInput = document.createElement('input')
      copyInput.value = this.userViewInfo.initPwd
      document.body.appendChild(copyInput)
      copyInput.select()
      document.execCommand('Copy')
      this.$message.success('复制成功')
      copyInput.remove()
    },
    switchUser(row) {
      requestUserApi('switchUser', { id: row.id, enable: row.status }).then(response => {
        if (response.code === '200') {
          this.queryList()
        } else {
          this.$message.error(response.message)
        }
      })
    },
    deleteUser(row) {
      this.$confirm('确定删除"' + row.username + '"的账号吗？', '删除账号确认', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        requestUserApi('deleteUser', { id: row.id }).then(response => {
          if (response.code === '200') {
            this.queryList()
          } else {
            this.$message.error(response.message)
          }
        })
      }).catch(() => {
      })
    }
  }
}
</script>
.el-table__body-wrapper {
  height: 100%;
}
<style>
</style>

